<template>
    <div class="content">
        <side-bar/>
        <div class="main-content bj">
            <el-scrollbar style="height: 100%;">
                <div class="bj-data">
                    <div class="bj-list" v-for="(list, index) in lists" :key="index">
                        <h3 class="list-title">{{ list['title'] }}</h3>
                        <div class="order-item" v-for="(item, index) in list['items']" :key="index" @click="open(item)">
                            <div class="center-div">
                                <img :src="item['imgSrc']" alt="">
                                <span>{{item['name']}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bj-list" style="margin-bottom: 0;width: 100%;padding: 2px 0;background-color: #afbbd0;position: absolute;bottom: 0;left: 0;right: 0;">
                        <!-- 底部 -->
                        <v-footer/>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>
<script>
import Footer from '../Footer'
import Header from '../Header'
import SideBar from '@/components/sideBar'
import financialMenu from '../../menu/financialMenu'
export default {
    components: {
        'v-header': Header,
        'v-footer': Footer,
        'side-bar': SideBar,
    },
    data() {
        return {
            lists: financialMenu
        }
    },
    methods: {
        open(item) {        //打开弹窗
            if(item['data']) {
                if(this.$util.isMobile()) item['data']['height'] = '600px';
                this.$util.openLayerIframe(item['data']);
            } else {
                this.$alert('模块开发中...', '系统提示', {
                    confirmButtonText: '关闭'
                });
            }
        }
    }
}
</script>
<style scoped>
    .bj-list {padding: 20px 0 0;}
    .bj-list .list-title {padding: 0 20px 20px;}
    .order-item {
        background-color: #f1f3f8;
        width: 210px;
        height: 84px;
        margin-left: 20px;
        margin-bottom: 20px;
        float: left;
        cursor: pointer;
    }
    .center-div {
        height: 54px;
        margin: 15px 0;
    }
    .center-div > img {
        width: 50px;
        height: 50px;
        float: left;
        margin: 0 15px;
    }
    .center-div > span {
        line-height: 54px;
        font-size: 15px;
        font-weight: 700;
    }
</style>